<template>
  <div>
    <!-- 列表页面 -->
    <div class="container" v-if="!showEdit">
      <div class="header">
        <div class="title">职位管理</div>
        <el-button style="margin: 0 20px" @click="handleEdit('add')" size="small" type="primary">新增</el-button>
      </div>
      <!-- 下拉筛选 -->
      <div class="select-group">
        <div class="select-box">
          <span>所属职位</span>
            <el-cascader
              clearable
              v-model="jobIdArr"
              :options="getDictiteList11"
              @change="handkeSearch"></el-cascader>
        </div>
        <div class="select-box">
          <span>投递开始时间 </span>
          <el-date-picker
            :disabledDate="false"
            @change="handkeSearch"
            v-model="searchMenu.startDate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div class="select-box">
          <span>职位状态 </span>
          <el-select @change="handkeSearch" size="medium" clearable filterable v-model="searchMenu.jobStat" placeholder="请选择">
            <el-option
              v-for="item in statuList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="select-group">
        <div class="select-box">
          <span>职位负责人 </span>
          <el-select @change="handkeSearch" size="medium" clearable filterable v-model="searchMenu.principal" placeholder="请选择">
            <el-option v-for="item in getDictiteListHr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
           <div class="select-box">
          <span>投递结束时间 </span>
          <el-date-picker
            :disabledDate="false"
            @change="handkeSearch"
            v-model="searchMenu.endDate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
    
      </div>
      <!-- <div class="select-group">
             
            </div> -->
      <!-- 表格 -->
      <el-table :data="position" v-loading="loading">
        <!-- <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column> -->
        <el-table-column prop="jobName" label="基本项目" width="100"></el-table-column>
        <el-table-column prop="principal" label="招聘负责人" width="120"></el-table-column>
        <el-table-column prop="channel" label="招聘渠道" width="120"></el-table-column>
        <el-table-column prop="source" label="职位来源" width="100"></el-table-column>
        <el-table-column prop="candNum" label="候选人总数" width="100">
          <template #default="scope">
            <el-button plain size="small" type="text" @click="handleJump('search',scope.row)">{{
              scope.row.candNum||0
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="employCount" label="入职人数" width="100">
          <template #default="scope">
            <el-button plain size="small" type="text" @click="handleJump('search',scope.row)">{{ scope.row.employCount||0 }}</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="num1" label="入职人数" width="100"></el-table-column> -->
        <el-table-column prop="startDate" label="开始时间" width="100"></el-table-column>
        <el-table-column prop="endDate" label="结束时间" width="100"></el-table-column>
        <el-table-column label="开启/关闭" width="100" prop="jobStat">
          <template  #default="scope">
            <el-switch
              v-model="scope.row.jobStat"
              active-color="#3963bc"
              @change="handleRecommend($event,scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button plain size="small" type="primary" @click="handleEdit('recommend',scope.row)">推荐简历</el-button>
            <el-button plain size="small" type="success" @click="handleEdit('edit',scope.row)">编辑</el-button>
            <!-- <el-button plain size="small" type="warning" @click="handleEdit(scope.row.id)">淘汰</el-button>
                        <el-button plain size="small" type="success" @click="handleEdit(scope.row.id)">下载简历</el-button>
                        <el-button plain size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        <el-button plain size="small" type="success" @click="handleEdit(scope.row.id)">放入人才库</el-button>
                        <el-button plain size="small" type="primary" @click="handleEdit(scope.row.id)">分配职位</el-button> -->
            <!-- <el-button plain size="small" type="danger" @click="dialogFormVisible=true">删除</el-button> -->
            <!-- v-permission="{ permission: '删除', type: 'disabled' }" -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float: right" background layout="prev, pager, next,total" :total="total"> </el-pagination>
    </div>
    <!-- 编辑页面 -->
    <position-modify
      v-else
      @editClose="editClose"
      :editData="editData"
      :title="title"
    ></position-modify>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
// import { ElMessageBox, ElMessage } from 'element-plus'
import positionModel from '@/model/position'
import positionModify from './positionAdd.vue'
import toolModel from '@/model/tool'
export default {
  components: {
    positionModify,
  },
  props: {
  },
  data() {
    return {
      jobIdArr:[],//
      searchMenu:{//职位搜索参数
        jobId:'',
        startDate:'',
        endDate:"",
        jobStat:'',
        principal:'',
      },
      statuList:[{label:'开启',value:1},{label:'关闭',value:0}],
      getDictiteList1: [],
      getDictiteList2: [],
      getDictiteList3: [],
      getDictiteList4: [],
      getDictiteList5: [],
      getDictiteList6: [],
      getDictiteList10:[],
      getDictiteList11:[],
      getDictiteListHr:[],
      getDictiteListHr2:[],
      //时间选择参数
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
          // return (time.getTime() < this.setTimeForm.openDate || time.getTime() < Date.now())
        },
      },
      title:'',
      total: 0,
      showEdit: false,
      loading: false,
      dialogNmae: '',
      dialogFormVisible: false,
      formLabelWidth: '60px',
      remark: '',
      position: [],
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    pname(val) {
      // this.$refs.tree.filter(val);
    },
  },
  methods: {
      getDate(date) {
      let myDate = new Date(date)
      let y = myDate.getFullYear()
      let m = myDate.getMonth() + 1
      let d = myDate.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      return '' + y + m + d
    },
    async handkeSearch(val) {
      var that = this
      console.log(val,'val');
      that.searchMenu.jobId = val[1]
      let searchMenu = that.searchMenu
      let startDate = ''
      let endDate = ''
      if (searchMenu.startDate) {
        startDate = that.getDate(searchMenu.startDate)
      } else {
        startDate = ''
      }
       if (searchMenu.endDate) {
        endDate = that.getDate(searchMenu.endDate)
      } else {
        endDate = ''
      }
      console.log(endDate,startDate, 'searchMenu')
      let params = {
        jobId:searchMenu.jobId,
        startDate:startDate,
        endDate:endDate,
        jobStat:searchMenu.jobStat,
        principal:searchMenu.principal,
        // pageNo: 1,
        // pageSize: 10,
      }
      this.positionQuery(1,10,params)
      console.log(params,'params');
      return 
      try {
        that.loading = true
        let res = await positionModel.positionQuery(params)

        if (res.code == 200 && res.data.data.length > 0) {
          that.listInof = res.data.data
          that.listInof.map(ele => {
            if (ele.candStatu == 0 || ele.candStatu) {
              ele.candStatuVal = that.getDictiteList2[ele.candStatu].label
            }
            ele.jobName = ele.jobInfo.jobName
            ele.deptName = ele.jobInfo.deptName
          })
          that.total = res.data.total
          that.loading = false
        } else {
          that.listInof = []
          that.loading = false
          that.candidates = []
        }
      } catch (error) {
        that.loading = false
        if (error.code == 10020) {
          that.candidates = []
        }
      }
    },
    async employee() {
      let that = this
      let parma = {
        employeeId: '',
        employeeName: '',
        pageNo: 1,
        pageSize: 10,
      }
      const res = await toolModel.employee(parma)
      if (res.code == 200) {
        const allData = JSON.parse(JSON.stringify(res.data.list))
        const allData2 = JSON.parse(JSON.stringify(res.data.list))
        const result = []
        allData.map(ele => {
          result.push({
            value: ele.employeeId + '',
            label: ele.toCompany,
          })
        })
        let result2 = allData2.reduce((memo, current) => {
          current.label = current.jobName
          memo[current['employeeId']] = current
          return memo
        }, {})
        that.getDictiteListHr = result
        console.log(result,'hr4');
        that.getDictiteListHr2 = result2
      }
    },
    async getDictiteList(dictId) {
      var that = this
      const res = await toolModel.dictitem({
        dictId: dictId,
      })
      const allData = res.data
      const result = []
      allData.map(ele => {
        result.push({
          value: ele.itemText,
          label: ele.itemText,
        })
      })
      console.log(result, '字典',dictId)
      return result
    },
    handleJump(){
      this.$router.push({
        path:'/candidate/list'
      })
    },
    handleRecommend(val,rowData) {
      this.loading = true
      console.log(val, rowData,'vallll')
      if (val) {
        setTimeout(() => {
          this.loading = false
          this.$message({
            type: 'success',
            message: '职位开启',
          })
        }, 1000)
      } else {
        setTimeout(() => {
          this.loading = false
          this.$message({
            type: 'warning',
            message: '职位关闭',
          })
        }, 1000)
      }
    },
    handleCommand(command) {
      this.searchMenu.HR = command
    },
    handleNodeClick(data) {
      console.log(data)
    },
    handleClick() {
      // eslint-disable-next-line
      alert('button click')
    },
    async positionQuery(pageNo=1,pageSize=10,param) {
      var that = this
      try{
        that.loading = true
        let params = {
        ... param,
        pageNo: pageNo,
        pageSize: pageSize,
      }
      console.log(params,'params');
      const res = await positionModel.positionQuery(params)
      // const res
      that.position = res.data.data
      that.total =  res.data.total
      that.loading = false
      }catch (error) {
        that.loading = false
        if (error.code == 10020) {
          that.position = []
        }
      }
    },
      //组织管理服务
    async positionQuery1(deptId) {
      var that = this
      let params = {
        deptId: deptId,
        pageNo: 1,
        pageSize: 999,
      }
      try {
        that.loading = true
        let { data } = await positionModel.positionQuery(params)
        let allData = [...data.data]
        let treeMapList = allData.reduce((memo, current) => {
          console.log(memo,'memo',current);
          current.label = current.deptId
          current.value = current.deptName
          memo[current['deptId']] ={
            value:current.deptId,
            label:current.deptName,
            deptName:current.deptName,
            deptId:current.deptId,
            jobId:current.jobId,
            jobName:current.jobName,
          }
          return memo
        }, {})
        let result1 = allData.reduce((arr, current) => {
          let deptId = current.deptId
          console.log(deptId);
          let parent = treeMapList[deptId]
          console.log(parent);
          if (deptId && deptId != null) {
            console.log(parent,'inparent');
            parent.children ? parent.children.push({value:current.jobId,label:current.jobName}) : (parent.children = [{value:current.jobId,label:current.jobName}])
            arr.push(parent)
          } else if (deptId == 0 && deptId!=null) {
            //这是根组织
            // arr.push(current)
          }
          return arr
        }, [])
        console.log(result1,'result1');
        that.getDictiteList11 = result1
        return
        console.log(treeMapList,'tree-1');//部门列表
          let mapList = allData.reduce((memo, current) => {
          // console.log(memo,'memo',current);
          current.label = current.deptId
          current.value = current.deptName
          memo.push({
            value:current.deptName,
            label:current.deptId,
            deptName:current.deptName,
            deptId:current.deptId,
            jobId:current.jobId,
            jobName:current.jobName,
          })
          return memo
        }, [])
        console.log(mapList,'tree-2');
          let result = mapList.reduce((arr, current) => {
          let deptId = current.deptId//判断是否有deptId
          if(deptId&&deptId!=null){//如果有id，则判断导出的arr是否有对应的项
          arr
            // console.log(deptId,treeMapList,'deptId');
            if(arr.deptId){
              arr.deptId.push({children:[{label:current.jobName,value:current.jobId}]})
            }else{
            }
          // if (parent) {
          //   parent.children ? parent.children.push({label:current.jobName,value:current.jobId}) : (parent.children = [{label:current.jobName,value:current.jobId}])
          // }else if(deptId ==0){
          //   arr.push(current)
          // }
          }
          return arr
        }, [])
        that.getDictiteList11 = result
        console.log(result,'-----');
        // that.optionsx = allData
        that.loading = false
      } catch (error) {
        that.loading = false
        if (error.code === 10020) {
          that.orgList = []
        }
      }
    },
    // 执行获取数据等初始化动作
    async init() {
      this.getDictiteList1 = await this.getDictiteList(1)
      this.getDictiteList2 = await this.getDictiteList(2)
      this.getDictiteList3 = await this.getDictiteList(3)
      this.getDictiteList4 = await this.getDictiteList(4)
      this.getDictiteList5 = await this.getDictiteList(5)
      this.getDictiteList6 = await this.getDictiteList(6)
      this.getDictiteList1 = await this.getDictiteList(1)
      //获取职位列表
      this.positionQuery()
      this.positionQuery1()
      this.employee()
    },
    filterNode(value, data) {
      if (!value) return true
      console.log(data.label, value)
      return data.label.indexOf(value) !== -1
    },
    goAdd(id) {
      this.$router.push({
        path: '/position/add',
        query: {
          id,
        },
      })
    },
     //显示详情信息
    handleEdit(command,row) {
      var that = this
      switch (command) {
        case 'add':
          that.title = '新增职位'
          break
        case 'edit':
          that.title = '编辑职位'
          break
        case 'recommend':
        that.$router.push({
        path:'/candidate/list',
        query:{
          jump:'recommend',
          row:row
        }
      })
          // break
          return
        default:
          that.title = '操作'
          break
      }

      that.showEdit = true
      that.editData = {
        behavior: command,
        row:row
      }
      console.log(that.editData,'that.editData');
    },
    editClose() {
      this.showEdit = false
      this.positionQuery()
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: start;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .dialog-box {
    text-align: center;
    padding: 0 80px;
  }

  .dialog-title {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    color: #f4516c;
  }

  .dialog-text {
    display: flex;
    flex-wrap: wrap;
    text-align: start;

    .dialog-i {
      width: 50%;
      line-height: 24px;
      height: 24px;
      margin: 10px 0;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

.select-group {
  display: flex;

  .select-box {
    width: 30%;
    height: 24px;
    line-height: 24px;
    margin-bottom: 20px;
    justify-content: space-between;

    span {
      display: inline-block;
      width: 100px;
    }

    .down-title {
      padding: 0 10px;
    }

    .down-div {
      border: 2px solid #007aff;
      border-radius: 4px;
      margin: 0;
      padding: 0;

      .down-dropdown {
        height: 24px;
        padding-left: 10px;
        line-height: 24px;
      }
    }
  }

  .el-tree-node__label {
    font-size: 20px;
    font-weight: bolder;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-container {
  width: 85%;
}
</style>
